<template>
	<view>
		<view class="u-p-30">
			<view class="bg_FFFFFF u-p-20 u-m-t-20 u-b-r-16">
				<view class="u-p-20 u-flex u-row-between" style="border-bottom: 1rpx solid #F4F1F1;"
					@click="$u.route('/subcontract/originalprice/ordermassage/ordermassage?num='+item.order_sn)"
					v-for="(items,index) in item.item" :key="index">
					<view class="u-flex">
						<view class="">
							<u-image :src='items.imgs[0]' width='183rpx' height='183rpx'></u-image>
						</view>
						<view class="u-p-l-10 ">
							<view class="u-weight">{{items.goods_name}}</view>
							<!-- <view class="u-weight u-p-t-10">可口30克*12枚</view> -->
							<view class="u-font-20  u-m-t-10" style="">
								{{items.spece_content}}
							</view>
							<view class=" u-p-t-10" style="color: #FC3533;">￥{{items.price}}</view>
						</view>

					</view>
					<view class="u-font-20" style="color:#454545;">{{items.num}}</view>
				</view>
				<view class="u-flex u-row-between u-m-t-40" @click="oneShow=true">
					<view class="u-weight u-font-28">货品状态</view>
					<view class="u-flex">
						<view class="u-font-28">{{params.transport_name==''?'请选择货品状态':params.transport_name}}</view>
						<view class="u-p-l-20 u-h-36">
							<u-image src='https://www.sqkjkj.vip/wxImg/orderlist/img2.png' width='20rpx' height='20rpx'></u-image>
						</view>
					</view>

				</view>
				<view @click="twoShow=true" class="u-flex u-row-between u-m-t-40">
					<view class="u-weight u-font-28">退货原因</view>
					<view class="u-flex">
						<view class=" u-font-28" style="color: #898989;">
							{{params.refund_cause==''?'请选择退货原因':params.refund_cause}}</view>
						<view class="u-p-l-20 u-h-36">
							<u-image src='https://www.sqkjkj.vip/wxImg/orderlist/img2.png' width='20rpx' height='20rpx'></u-image>
						</view>
					</view>

				</view>
				<view v-if="params.transport_status==1" @click="threeShow=true" class="u-flex u-row-between u-m-t-40">
					<view class="u-weight u-font-28">物流公司</view>
					<view class="u-flex">
						<view class=" u-font-28" style="color: #898989;">{{params.express_id==''?'请选择物流公司':params.express_name}}</view>
						<view class="u-p-l-20 u-h-36">
							<u-image src='https://www.sqkjkj.vip/wxImg/orderlist/img2.png' width='20rpx' height='20rpx'></u-image>
						</view>
					</view>

				</view>
				<view v-if="params.transport_status==1" class="u-flex u-row-between u-m-t-40">
					<view class="u-weight u-font-28">快递单号</view>
					<u-input type='number' v-model="params.transport_no" :border='false' placeholder='请输入快递单号'
						input-align='right'></u-input>

				</view>

				<view class="u-flex u-row-between u-m-t-40">
					<view class="u-weight u-font-28">退货金额</view>
					<view class="u-font-28" style="color: #FC3533;">￥{{item.goods_amount}}</view>

				</view>
			</view>
		</view>

		<view class="" style="padding: 30rpx 30rpx 200rpx;">
			<view class="u-p-20 u-b-r-12 bg_FFFFFF">
				<view class="u-p-20 u-b-r-16" style="background-color:#F7F7F7 ;">
					<view class="u-m-t-10 u-weight">退款详情</view>
					<view class="u-m-t-30 u-p-30 u-b-r-8 u-w-620 u-h-350" style="border: 1rpx dashed #BABABA;">
						<u-input type='textarea' v-model="params.refund_info" placeholder='退款详情'></u-input>
					</view>
				</view>

				<view class="u-m-t-30">
					<view class="u-weight">上传图片<text style="font-size: 20rpx; color: #989898;">(可上传0-8张)</text></view>
					<view class="u-m-t-20 u-w-640" style="overflow: auto;">
						<u-upload @on-success="uploaded" upload-text="点击上传" @on-remove="remove"
							:preview-full-image="false" :file-list="fileList" imageMode="aspectFit"
							:show-progress="false" width="150rpx" height="150rpx" ref="uUpload" :auto-upload="true"
							max-count="8" :name="'img'">
						</u-upload>

					</view>
				</view>
			</view>
		</view>

		<view @click="submit" class="u-fix u-w-750 u-b-0 u-z-300 u-p-30 bg_FFFFFF">
			<view class="u-w-630 u-h-98 u-text-center u-l-h-98 u-font-30 u-b-r-16 cl_FFF u-auto"
				style="background: linear-gradient(-64deg, #FF382C, #FF633F);">提交</view>
		</view>
		<u-select v-model="oneShow" :list="oneList" @confirm="oneFirm"></u-select>
		<u-select v-model="twoShow" :list="twoList" @confirm="twoFirm"></u-select>
		<u-select v-model="threeShow" :list="threeList" value-name="id" label-name="name" @confirm="threeFirm"></u-select>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: '',
				// 退款原因
				value: '',
				// 是否收到货
				num: '',
				// 快递单号
				input: '',
				params: {
					order_id: '', //整型	必填	1	-	订单id
					refund_cause: '', //字符串	必填	0	-	退款原因id原因获取config('refund_cause')
					transport_name: '',
					transport_status: '', //整型	必填	0	-	货物状态货物状态.1:已收到货,0:未收到货
					refund_info: '', //字符串	必填	0	-	退款详情
					refund_img: '', //字符串	必填	0	-	图片
					express_id: '', //字符串	必填	0	-	快递公司编码
					express_name:'',
					transport_no: '', //字符串	必填	0	-	快递单号
				},
				oneShow: false,
				oneList: [{
						value: '0',
						label: '未收到货'
					},
					{
						value: '1',
						label: '已收到货'
					}
				],
				twoShow: false,
				twoList: [],
				threeShow: false,
				threeList: [],
				fileList: [],
				photoList: []
			}
		},
		onLoad(obj) {
			this.params.order_id = obj.num
		},
		onShow() {
			this.item = uni.getStorageSync('applyAfter')
			this.refund_cause()
			this.shop_delivery_list()
		},
		methods: {
			refund_cause() {
				this.$api.refund_cause({}, res => {
					if (res.data.code == 1) {
						this.twoList = []
						res.data.data.forEach(d => {
							this.twoList.push({
								label: d,
								value: d
							})
						})
					}
				})
			},
			shop_delivery_list() {
				this.$api.shop_delivery_list({shop_id:this.item.shop_id}, res => {
					if (res.data.code == 1) {
						this.threeList = res.data.data
					}
				})
			},
			oneFirm(e) {
				if(e[0].value==0){
					this.params.express_id=''
					this.params.transport_no=''
				}
				this.params.transport_name = e[0].label
				this.params.transport_status = e[0].value
			},
			twoFirm(e) {
				this.params.refund_cause = e[0].value
			},
			threeFirm(e) {
				this.params.express_name = e[0].label
				this.params.express_id = e[0].value
			},
			uploaded(lists) {
				this.photoList.push(lists)
			},
			remove(index, lists) {
				this.photoList.splice(index, 1)
			},
			async submit(){
				await this.$com.arrData(this.photoList,'id').then(img=>{
					this.params.refund_img=img
				})
				this.$api.refund_apply(this.params, res => {
					if (res.data.code == 1) {
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'success',
							callback: cal => {
								uni.navigateBack()
							}
						})
					}
				})
				
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #f5f5f5;
	}
</style>
